<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in musicList" @click="playMusic(item.id, index)" :key="item.id"
                :title="item.name" />
        </van-list>
        <audio ref="music" :src="musicUrl" controls loop autoplay></audio>
        <div class="play" @click="showPopup" v-if="musicUrl != ''">
            <img class="img" :class="{ 'img2': animation }" :src="musicList[index].pic120" alt="">
            <div class="text">{{ musicList[index].name }} - <span>{{
                musicList[index].artist
            }}</span></div>
        </div>

        <div v-if="musicUrl != ''" class="play-icon">
            <van-icon v-if="show" @click="audioPlay" size="30px" name="play" />
            <van-icon v-if="!show" @click="audioPause" size="30px" name="pause" />
        </div>

        <van-popup v-if="musicUrl != ''" closeable close-icon-position="top-left" v-model="show1" position="bottom"
            :style="{ height: '100%' }">
            <img style="width: 100%;height: 100%;filter: blur(20px);" :src="musicList[index].pic" alt="">
            <h3>{{ musicList[index].name }}</h3>
            <h4>{{
                musicList[index].artist
            }}</h4>
            <img @click="getLyric" class="img" :class="{ 'img2': animation }" :src="musicList[index].pic" alt="">
            <!-- 歌词 -->
            <div>

            </div>



            <div class="pl" @click="getComment(id)">
                <van-icon size="25px" name="chat-o" />
            </div>
            <van-popup v-model="showPL" position="bottom" closeable :style="{ height: '80%' }">
                <div class="comment">
                    <div class="comment-un" v-if="comment == undefined">评论获取失败，请重新进入!</div>
                    <div class="comment-pl" v-for="(item, index) in comment" :key="index">
                        <div class="xinxi">
                            <img :src="item.pic" alt="">
                            <div class="user-name">{{ item.name }}</div>
                            <div class="time">{{ item.time }}</div>
                        </div>
                        <div class="commin">
                            {{ item.msg }}
                        </div>
                    </div>
                </div>
            </van-popup>



            <div class="bofang">
                <van-icon v-if="show" @click="audioPlay" size="60px" name="play" />
                <van-icon v-if="!show" @click="audioPause" size="60px" name="pause" />
            </div>



            <div class="mv" is-link @click="playMv(id)">
                <van-icon size="25px" name="tv-o" />
            </div>
            <van-popup v-model="showMV">
                <video ref="mv" :src="mvUrl" controls loop autoplay></video>
            </van-popup>
        </van-popup>
    </div>
</template>

<script>
import { Notify } from 'vant';
import { getMusicAPI, getMvAPI, getCommentAPI, getLyricAPI } from '../api/getMusic'
export default {
    name: "MusicList",
    components: {
    [Notify.Component.name]: Notify.Component,
  },
    data() {
        return {
            // 歌曲列表
            musicList: "",
            // 歌曲地址
            musicUrl: "",
            index: "",
            mvUrl: "",
            id: "",
            loading: false,
            finished: false,
            show: false,
            show1: false,
            animation: true,
            showMV: false,
            showPL: false,
            comment: ''
        }
    },
    methods: {
        getMusicList(musicList) {
            this.musicList = musicList
        },
        playMusic(id, index) {
            this.show = false
            this.animation = true
            this.index = index
            this.id = id
            getMusicAPI(id).then((res) => {
                console.log(res);
                console.log(res.data.data[0].url);
                this.musicUrl = res.data.data[0].url
            })
            this.$refs.music.play();
        },
        playMv(id) {
            getMvAPI(id).then((res) => {
                this.$refs.music.pause();
                console.log(res.data.data[0].url);
                this.mvUrl = res.data.data[0].url
                this.show = true
                this.showMV = true
                if(this.mvUrl == 'res not found') {
                    Notify({ type: 'warning', message: '此歌曲无MV' });
                }
            })
        },
        getComment(id) {
            getCommentAPI(id).then((res) => {
                this.showPL = true
                console.log(res.data.data);
                this.comment = res.data.data
            })
        },
        getLyric(id) {
            getLyricAPI(id).then((res) => {
                console.log(res);
            })
        },
        // 播放/暂停
        audioPlay() {
            this.mvUrl = ''
            this.animation = true
            this.show = false
            this.$refs.music.play();
        },
        audioPause() {
            this.mvUrl = ''
            this.animation = false
            this.show = true
            this.$refs.music.pause();
        },


        showPopup() {
            this.show1 = true;
        },

        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.musicList.length == this.musicList.length) {
                    this.finished = true;
                }
            }, 1000);
        },


    },
    mounted() {
        this.$bus.$on("getMusicList", this.getMusicList)
    }
}
</script>

<style>
body {
    background-color: #f9f7f7;
}

audio {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.play {
    display: flex;
    align-items: center;
    /* z-index: 100; */
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.img2 {
    margin: 0 8px;
    margin-top: 5px;
    width: 40px;
    border-radius: 100px;
    animation: rotation 30s linear infinite;
}

.img {
    margin: 0 8px;
    margin-top: 5px;
    width: 40px;
    border-radius: 100px;
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.text span {
    color: #aaa;
}

.play-icon {
    position: fixed;
    bottom: 10px;
    right: 20px;
}

.van-popup .img {
    z-index: 999;
    position: absolute;
    top: 25%;
    left: 12%;
    width: 280px;
    border-radius: 10000px;
}

h3 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 60px;
    align-content: center;
    color: #fff;
    z-index: 999;
}

h4 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 85px;
    align-content: center;
    color: #fff;
    z-index: 999;
}

.bofang {
    position: absolute;
    bottom: 60px;
    color: #fff;
    left: 50%;
    transform: translate(-50%, 0);
}

.mv {
    position: absolute;
    bottom: 70px;
    left: 60px;
}

.mv .van-icon {
    color: #fff;
}

.pl {
    position: absolute;
    bottom: 70px;
    right: 60px;
}

.pl .van-icon {
    color: #fff;
}

video {
    width: 100%;
    height: 100%;
}

.van-popup .van-popup--center {
    width: 90%;
}

.comment {
    margin-top: 60px;
}

.comment-pl img {
    width: 40px;
    border-radius: 100px;
    margin: 0 10px;
}

.xinxi {
    display: flex;
    align-items: center;
}

.user-name {
    width: 150px;
    font-size: 20px;
    margin-right: 10px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time {
    font-size: 14px;
    color: #ccc;
}

.commin {
    margin: 15px;
    margin-left: 20px;
    font-family:  Times,"Times New Roman", serif;
    font-size: 18px;
}
</style>